<template>
  <div class="choseAdress">
    <div
      class="addressItem"
      v-for="(address, index) in receptData.list"
      :key="index"
    >
      <addressCard :address="address" @click="choseAddress(address)">
        <template #chose>
          <nut-image
            v-if="currentSelect == address.id"
            class="hasChoseIcon"
            :src="getAssetsFile('home/payOrder/chosePay.png')"
          ></nut-image>
          <nut-image
            v-else
            class="noChoseIcon"
            :src="getAssetsFile('home/payOrder/noChose.png')"
          ></nut-image>
        </template>
      </addressCard>
    </div>
    <fullFoot :title="'确定'" @click-btn="confirm"></fullFoot>
  </div>
</template>

<script setup lang="ts">
import addressCard from "@/components/addressCard/index.vue";
import { getAssetsFile, isRes } from "@/utils/pub-use";
import { ref, onMounted } from "vue";
import { getaddressListApi, selfPrimingListApi } from "@/api/pay/index";
import fullFoot from "../groupLink/components/fullFoot.vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
let addressType: any = route.query.type;
let ids: any = route.query.ids;
const getaddressList = async () => {
  let res = await getaddressListApi({ page: 1, pagesize: 9999 });
  if (isRes(res)) {
    receptData.value = res.result;
  }
};

const selfPrimingList = async () => {
  let res = await selfPrimingListApi({ page: 1, pagesize: 9999 });
  if (isRes(res)) {
    receptData.value = res.result;
  }
};

onMounted(() => {
  if (addressType == 1) {
    selfPrimingList();
  } else {
    getaddressList();
  }
});

const receptData: any = ref({});
let currentSelect = ref<number>(1);

const choseAddress = (address: any) => {
  currentSelect.value = address.id;
};

const router = useRouter();
const confirm = () => {
  if (addressType == 3) {
    addressType = 1;
  }
  router.push({
    path: "/home/payOrder",
    query: {
      addressId: currentSelect.value,
      ids: ids,
      addressType: addressType,
      other: 1,
    },
  });
};
</script>

<style lang="scss" scoped>
.choseAdress {
  background: #f8f9fa;
  padding: 20px 0px;
  .addressItem {
    margin-top: 20px;
    padding: 0 30px;
    .hasChoseIcon,
    .noChoseIcon {
      width: 36px;
      height: 36px;
      margin-right: 34px;
    }
  }
  .addressItem:nth-child(1) {
    margin-top: 0;
  }
}
</style>
